import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {InputNumber, Input, Slider, Radio} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import SlideInput from '../../common/SlideInput/index';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class MTitleOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            markStyle: {},
            textStyle: {},
            dataset: {
                text: '',
            }
        }
    };


    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, markStyle, textStyle = {}, dataset} = this.state.data;
        var {hasMark = '1', text = ''} = dataset;

        return (
            <div className="optsPanel">

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">标题</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <Input
                                placeholder="请输入标题"
                                defaultValue={text}
                                onInput={(e) => {
                                    this.$dataChange('text', e.target.value)
                                }}
                            />
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">标记</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <RadioGroup onChange={(e) => {
                                this.$dataChange('hasMark', e.target.value);
                            }} defaultValue={hasMark}>
                                <Radio value={'0'}>无标记</Radio>
                                <Radio value={'1'}>有标记</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                </div>
                {
                    hasMark != '0' ?
                        (
                            <div className="optsPanel__item">
                                <label className="optsPanel__item__hd">标记颜色</label>
                                <div className="optsPanel__item__bd">
                                    <div className="optsPanel__item__inputWrap">
                                        <ColorPicker
                                            color={markStyle.backgroundColor}
                                            onChangeComplete={(color, rgba) => {
                                                this.$dataChange('backgroundColor', rgba, 'markStyle');
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>
                        )
                        : null
                }

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">行高</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput
                            step={1}
                            min={1}
                            max={100}
                            defaultValue={parseInt(style.lineHeight)}
                            value={parseInt(style.lineHeight)}
                            onChange={(val) => {
                                this.$dataChange('lineHeight', val + 'px', 'style');
                            }}
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">背景</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <ColorPicker
                                color={style.backgroundColor}
                                onChangeComplete={(color, rgba) => {
                                    this.$dataChange('backgroundColor', rgba, 'style');
                                }}
                            />
                        </div>
                    </div>
                </div>


                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文本样式</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <div className="mTextOpts__styles">
                                <div className="mTextOpts__styles__item">
                                    <ColorPicker color="#000" onChangeComplete={(color, rgba) => {
                                        this.$dataChange('color', rgba, 'style');
                                    }}/>
                                </div>
                                <div className="mTextOpts__styles__item">
                                    <span
                                        className={['fontSytle_btn fontSytle__bold', style.fontWeight ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('fontWeight', style.fontWeight == 'bold' ? '' : 'bold', 'style');
                                        }}
                                    >粗体</span>
                                    <span
                                        className={['fontSytle_btn', style.fontStyle == 'italic' ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('fontStyle', style.fontStyle == 'italic' ? '' : 'italic', 'style');
                                        }}
                                    >斜体</span>
                                    <span
                                        className={['fontSytle_btn', style.textDecoration == 'underline' ? 'fontSytle_btn_active' : ''].join(' ')}
                                        onClick={() => {
                                            var data = this.state.data;
                                            var style = data.style;

                                            this.$dataChange('textDecoration', style.textDecoration == 'underline' ? 'none' : 'underline', 'style');
                                        }}
                                    >下划线</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文字位置</label>
                    <div className="optsPanel__item__bd">
                        <div className="mTextOpts__styles__item">
                            <RadioGroup
                                onChange={(e) => {
                                    this.$dataChange('textAlign', e.target.value, 'textStyle');
                                }}
                                defaultValue={textStyle.textAlign || 'left'}
                            >
                                <RadioButton value="left">居左</RadioButton>
                                <RadioButton value="center">居中</RadioButton>
                                <RadioButton value="right">居右</RadioButton>
                            </RadioGroup>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">文字大小</label>
                    <div className="optsPanel__item__bd">
                        <div className="mTextOpts__styles__item">
                            <InputNumber
                                min={1}
                                defaultValue={style.fontSize || '14'}
                                onChange={(val) => {
                                    this.$dataChange('fontSize', val + 'px', 'style');
                                }}
                            />
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">左外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={parseInt(style.paddingLeft || 0)}
                                    onChange={(val) => {
                                        this.$dataChange('paddingLeft', val + 'px', 'style');
                                        this.$dataChange('paddingRight', val + 'px', 'style');
                                    }}/>
                    </div>
                </div>


                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={parseInt(style.marginBottom || 0)}
                                    onChange={(val) => {
                                        this.$dataChange('marginBottom', val + 'px', 'style');
                                    }}/>
                    </div>
                </div>

            </div>
        );
    }
}

export default MTitleOpts;
